<template>
  <div>
    <header>
      <div class="returns" @click="goBack()">
        <i class="iconfont icon-fanhui"></i>
      </div>

      <div class="go-home" @click="goHome()">
        <img src="@/assets/images/home.png" alt="" />
      </div>
    </header>

    <div class="Grid">
      <div class="Grid-cell" v-for="item in chafuList" :key="item.id">
        <router-link :to="'/detail/' + item.id">
          <div class="item">
            <img :src="item.imgUrl" alt="" />
            <p>￥ {{ item.price }}</p>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import http from "@/common/api/request.js";
export default {
  data() {
    return {
      chafuList: [],
    };
  },
  created() {
    this.getChafu();
  },

  methods: {
    //   获取茶书分类
    async getChafu() {
      let res = await http.$axios({
        url: "http://127.0.0.1:3008/goods/goodsyifulist",
      });
      this.chafuList = res;
      console.log(this.chafuList);
    },

    // 返回上一级
    goBack() {
      this.$router.go(-1);
    },

    goHome() {
      this.$router.push("/list");
    },
  },
};
</script>

<style scoped>
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  background-color: #b0352f;
}
header .returns {
  line-height: 1.173333rem;
  padding: 0 0.533333rem;
}
header .returns i {
  color: #fff;
  font-size: 0.693333rem;
}
header .go-home {
  padding: 0 0.266666rem;
  line-height: 1.173333rem;
}
header .go-home img {
  width: 35px;
  height: 35px;
  margin-top: 9px;
}
.Grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.Grid-cell {
  flex: 40%;
  margin: 10px;
  margin-top: 34px;
}
.Grid-cell img {
  border-radius: 9px;
  margin-top: 8px;
  height: 213px;
  width: 101%;
}
.Grid-cell P {
  margin-left: 5px;
  font-size: 18px;
  color: #fd3f31;
  margin-top: 18px;
} /*# sourceMappingURL=./index.css.map */
</style>
